<template>
  <div class="app-container">
    <div class="container ">
      <el-row :gutter="10" class="filter-container">
        <el-col :span="16">
          <el-button
            v-waves
            class="filter-item margin-left20"
            type="primary"
            size="mini"
            @click="submitForm('open')"
          >
            <i class="el-icon-circle-plus-outline" />&nbsp;新增
          </el-button>
          <el-upload
            class="upload-demo"
            :show-file-list="false"
            action="http://10.10.10.11:9006/file/upload"
            :before-upload="beforeAvatarUpload"
            :headers="upHeaders"
            accept=".xls,.xlsx"
            :on-success="handleAvatarSuccess"
          >
            <el-button
              size="mini"
              class="filter-item margin-left20"
              type="primary"
            ><i class="el-icon-circle-plus-outline" />&nbsp;导入</el-button>
          </el-upload>
          <el-button
            v-waves
            class="filter-item margin-left20 upload-demo"
            type="primary"
            size="mini"
            @click="outloadFile"
          >
            <i class="el-icon-download" />&nbsp;导出
          </el-button>
          <el-button
            v-waves
            class="filter-item margin-left20 upload-demo"
            type="primary"
            size="mini"
            @click="downloadFile"
          >
            下载导入模板
          </el-button>
        </el-col>
        <!-- <el-col :span="4" style="text-align: right;">
          <el-select
            v-model="listQuery.departId"
            placeholder="请选择部门"
            size="mini"
            clearable
            @change="queryDepartC"
          >
            <el-option
              v-for="item in options10"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col> -->
        <el-col :span="7" :offset="1" style="text-align: right;">
          <el-input
            v-model="listQuery.search"
            style="width:160px;padding-right:12px"
            placeholder="搜索设备名称"
            size="mini"
          />
          <el-button size="mini" type="primary" @click="getList">搜索</el-button>
        </el-col>
      </el-row>
      <div>
        <!-- 删除资产 -->
        <el-dialog
          title="删除资产"
          :visible.sync="delUserdialogV"
          width="25%"
          center
        >
          <div class="text-algin-center">
            <el-avatar :size="60" src="../../assets/icons_slices/img_opo_tip.png">
              <img src="../../assets/icons_slices/img_opo_tip.png">
            </el-avatar>
            <h3>确定删除吗？</h3>
            <span>删除后不可恢复</span>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" size="mini" @click="handleDelete('do')">删除</el-button>
            <el-button size="mini" @click="delUserdialogV = false">取 消</el-button>
          </span>
        </el-dialog>
        <!-- 回收资产 -->
        <el-dialog
          title="删除资产"
          :visible.sync="recUserdialogV"
          width="25%"
          center
        >
          <div class="text-algin-center">
            <el-avatar :size="60" src="../../assets/icons_slices/img_opo_tip.png">
              <img src="../../assets/icons_slices/img_opo_tip.png">
            </el-avatar>
            <h3>确定删除资产吗？</h3>
            <!-- <span>回收后已授权软件将不用</span> -->
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" size="mini" @click="handleRecover('do')">删除</el-button>
            <el-button size="mini" @click="recUserdialogV = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <el-table
        v-loading="listLoading"
        element-loading-text="正在加载中..."
        element-loading-background="rgba(0, 0, 0, 0.5)"
        :data="list"
        type="index"
        border
        size="mini"
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            {{ scope.$index+1 + ((listQuery.page-1) * listQuery.limit ) }}
          </template>
        </el-table-column>
        <el-table-column label="系统名称" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.sysName }}
          </template>
        </el-table-column>
        <el-table-column label="机柜编号" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.cabinetNumber }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备编号" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deivceNumber }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="制造商" align="center" width="200px">
          <template slot-scope="scope">
          {{ scope.row.manufacturer }}
          </template>
        </el-table-column> -->
        <el-table-column label="设备名称" align="center" width="230px">
          <template slot-scope="scope">
            <div class="strinExceeds" :title="scope.row.deviceName">{{ scope.row.deviceName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="设备品牌" width="200px" align="center">
          <template slot-scope="scope">
            {{ scope.row.brandName }}
          </template>
        </el-table-column>
        <el-table-column label="设备型号" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deviceModel }}
          </template>
        </el-table-column>
        <el-table-column label="用途" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.purpose }}
          </template>
        </el-table-column>
        <el-table-column label="设备位置" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deviceAddr }}
          </template>
        </el-table-column>
        <el-table-column label="设备授权时间" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.authTime }}
          </template>
        </el-table-column>
        <el-table-column label="授权起始时间" align="center" width="300px">
          <template slot-scope="scope">
            {{ scope.row.authStart }}{{ scope.row.authEnd?'-'+ scope.row.authEnd : '' }}
          </template>
        </el-table-column>
        <el-table-column label="设备状态" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deviceState == 1?'在线':scope.row.state ==2 ? '离线':'无' }}
          </template>
        </el-table-column>
        <el-table-column label="设备MAC地址" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deviceMac }}
          </template>
        </el-table-column>
        <el-table-column label="设备ip地址" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.deviceIp }}
          </template>
        </el-table-column>
        <el-table-column label="登陆方式" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.loginType }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="采购时间" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.softName }}
          </template>
        </el-table-column> -->
        <el-table-column label="管理员" align="center" width="200px">
          <template slot-scope="scope">
            {{ scope.row.manageName }}
          </template>
        </el-table-column>
        <el-table-column label="技术员" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.technologyName }}
          </template>
        </el-table-column>
        <el-table-column label="技术员联系方式" align="center" width="180px">
          <template slot-scope="scope">
            {{ scope.row.technologyPhone }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="230px" class="trinExceeds">
          <template slot-scope="scope">
            <div class="strinExceeds" :title="scope.row.remark">{{ scope.row.remark }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
<!--            :disabled="!isMyDept(scope.row.departId)&&!isAdmin1"-->
            <el-button
              style="width: 80px"
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              style="width: 80px"
              type="danger"
              size="mini"
              @click="handleRecover(scope.$index, scope.row)"
            >删除</el-button>
            <!-- <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
    <!-- 添加用户弹框 -->
    <el-dialog
      :title="titleStatus"
      :visible.sync="addUserdialogV"
      width="80%"
      :before-close="handleClose"
      center
    >
      <el-form
        ref="ruleForm"
        class="formInner"
        :rules="rules"
        label-width="120px"
        size="mini"
        :inline="true"
        :model="formAddUser"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="系统名称:" prop="sysName">
              <el-input v-model="formAddUser.sysName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机柜编号:" prop="cabinetNumber">
              <el-input v-model="formAddUser.cabinetNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备编号:" prop="deivceNumber">
              <el-input v-model="formAddUser.deivceNumber" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备名称:" prop="deviceName">
              <el-input v-model="formAddUser.deviceName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备品牌:" prop="brandName">
              <el-input v-model="formAddUser.brandName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备型号:" prop="deviceModel">
              <el-input v-model="formAddUser.deviceModel" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用途:" prop="purpose">
              <el-input v-model="formAddUser.purpose" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="设备品牌:" >
              <el-input v-model="formAddUser.technicianName"  />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="设备位置:">
              <el-input v-model="formAddUser.deviceAddr" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理员:">
              <el-input v-model="formAddUser.manageName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备授权时间:">
              <el-input v-model="formAddUser.authTime" />
              <!-- <div class="block">
                <el-date-picker
                  v-model="formAddUser.authTime"
                  style="width:85%"
                  type="date"
                  placeholder="永久"
                />
              </div> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="授权开始时间:">
              <div class="block">
                <el-date-picker
                  v-model="formAddUser.authStart"
                  style="width:85%"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="授权到期时间:">
              <div class="block">
                <el-date-picker
                  v-model="formAddUser.authEnd"
                  style="width:85%"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备MAC地址:">
              <el-input v-model="formAddUser.deviceMac" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备ip地址:">
              <el-input v-model="formAddUser.deviceIp" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登录方式:">
              <el-input v-model="formAddUser.loginType" />
              <!-- <el-select v-model="formAddUser.loginType" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="技术员:">
              <el-input v-model="formAddUser.technologyName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="技术员电话:">
              <el-input v-model="formAddUser.technologyPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态:" prop="deviceState">
              <el-select v-model="formAddUser.deviceState" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model="formAddUser.remark"
                placeholder="请输入内容"
                :autosize="{ minRows: 2, maxRows: 4}"
                type="textarea"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitForm('ruleForm')">确 定</el-button>
        <el-button size="mini" @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { assetsGudingPage, assetsGudingAdd, assetsGudingDel,
  assetsGudingPut, assetsImport, assetsExport } from '@/api/assetGudingSoft'
import Pagination from '@/components/Pagination'
import {
  departmentList
} from '@/api/department'
import { userList, userAdd
  , userDel, userPut, userPermission, userPasswordPut } from '@/api/user'
import { getCookie, setCookie, removeCookie } from '@/utils/cookie'
export default {
  computed: {
    isManage() {
      // console.log(getCookie('userInfo').realName)
      if (getCookie('userInfo')) {
        return JSON.parse(getCookie('userInfo')).roleType === 1024 ||
        JSON.parse(getCookie('userInfo')).roleType === 1025
      } else {
        return false
      }
    }
  },
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      isAdmin1: false,
      upHeaders: {
        ACCESS_TOKEN: getToken()
      },
      cacheId: null,
      recUserdialogV: false,
      datevalue2: null,
      datevalue1: null,
      isUserEdit: false,
      titleStatus: '添加资产',
      rules: {
        sysName: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        cabinetNumber: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        deivceNumber: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        deviceName: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        purpose: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        brandName: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        deviceModel: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        deviceState: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号长度不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      formAddUser: {
        'authEnd': '',
        'authStart': '',
        'authTime': '永久',
        'brandName': '',
        'cabinetNumber': '',
        'deivceNumber': '',
        'deviceAddr': '',
        'deviceIp': '',
        'deviceMac': '',
        'deviceModel': '',
        'deviceName': '',
        'deviceState': 1,
        'id': 0,
        'loginType': '',
        'manageName': '',
        'purpose': '',
        'remark': '',
        'sysName': '',
        'technologyName': '',
        'technologyPhone': '',
        'userId': 0
      },
      addUserdialogV: false,
      delUserdialogV: false,
      value1: '1',
      value2: '1',
      total: 10,
      list: [],
      listLoading: false,
      listQuery: {
        departId: '',
        search: '',
        page: 1,
        limit: 10,
        menuFrom: 1
      },
      options10: [],
      options: [{
        value: '1',
        label: '商业软件'
      }, {
        value: '2',
        label: 'OEM软件'
      }, {
        value: '3',
        label: '自开发软件'
      }],
      options1: [{
        value: 1,
        label: '在线'
      }, {
        value: 2,
        label: '离线'
      }, {
        value: 3,
        label: '无'
      }],
      options2: [{
        value: '1',
        label: '账号密码'
      }, {
        value: '2',
        label: '关联登录'
      }],
      editPassword: false,
      value: '1'
    }
  },
  created() {
    if (JSON.parse(getCookie('userInfo')).roleType === 1024) {
      this.isAdmin1 = true
    } else {
      this.isAdmin1 = false
    }
    this.getDepartmentList()
    this.fetchData()
  },
  methods: {
    isMyDept(deptId) {
      return JSON.parse(getCookie('userInfo')).departmentId == deptId
    },
    getDepartmentList() {
      departmentList({
        limit: 50,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options10 = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options10.push(item)
            }
          })
        }
      })
    },
    queryDepartC() {
      this.getList()
    },
    downloadFile() {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.setAttribute('download', '信息化固定资产管理台帐-模板')
      link.href = 'http://10.10.10.11:9006/upload/%E6%A8%A1%E7%89%88-%E5%9B%BA%E5%AE%9A%E8%B5%84%E4%BA%A7%E7%AE%A1%E7%90%86%E5%8F%B0%E5%B8%90.xlsx'
      document.body.appendChild(link)
      link.click()
    },
    outloadFile() {
      assetsExport(this.listQuery).then(res => {
        if (res.code === 200) {
          // this.getList()
          const link = document.createElement('a')
          link.style.display = 'none'
          link.setAttribute('download', '信息化固定资产管理台帐')
          link.href = res.message
          document.body.appendChild(link)
          link.click()
          // window.open(res.message)
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.name.indexOf('xls')
      const isLt2M = file.size / 1024 / 1024 < 200
      if (!isJPG) {
        this.$message.error('上传文件只能是Excel文件!')
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 200MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response && response.code === 200) {
        this.listLoading = true
        assetsImport({
          filePath: response.data
        }).then(res => {
          if (res.code === 200) {
            // this.getList()
            this.listLoading = false
            this.$message.success('导入硬件台账申请成功')
          }
        })
        // this.ruleForm.logo = response.data
        // this.logoUrl = URL.createObjectURL(file.raw)
      } else {
        this.$message.warning('请求异常')
      }
    },
    initData() {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate()
      }
      this.formAddUser = {
        'authEnd': '',
        'authStart': '',
        'authTime': '永久',
        'brandName': '',
        'cabinetNumber': '',
        'deivceNumber': '',
        'deviceAddr': '',
        'deviceIp': '',
        'deviceMac': '',
        'deviceModel': '',
        'deviceName': '',
        'deviceState': 1,
        'id': 0,
        'loginType': '',
        'manageName': '',
        'purpose': '',
        'remark': '',
        'sysName': '',
        'technologyName': '',
        'technologyPhone': '',
        'userId': 0
      }
    },
    handleClose(params) {
      this.getList()
      this.initData()
      this.addUserdialogV = false
    },
    submitForm(formName, editPassword) {
      if (formName === 'open') {
        this.initData()
        this.titleStatus = '添加资产'
        this.formAddUser.userName = ''
        this.formAddUser.phone = ''
        this.addUserdialogV = true
        this.formAddUser.id = ''
        this.isUserEdit = false
      } else {
        if (this.formAddUser.id !== '') {
          this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
              assetsGudingPut(this.formAddUser).then(res => {
                if (res.code === 200) {
                  this.imageUrl = ''
                  this.addUserdialogV = false
                  this.initData()
                  this.getList()
                }
              })
            }
          })
        } else {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              assetsGudingAdd(this.formAddUser).then(res => {
                if (res.code === 200) {
                  this.addUserdialogV = false
                  this.initData()
                  this.getList()
                }
              })
              // alert('submit!')
            } else {
              return false
            }
          })
        }
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleEdit(index, row) {
      this.titleStatus = '修改资产'
      this.addUserdialogV = true
      this.formAddUser = row
    },
    handleRecover(index, row) {
      if (index == 'do') {
        // this.$confirm('确定删除吗？', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        assetsGudingDel(
          {
            ids: this.cacheId
          }
        ).then(res => {
          if (res.code == 200) {
            this.recUserdialogV = false
            this.$message.success('删除成功')
            this.getList()
          }
        })
        // }).catch(() => {
        //   this.$message.info('已点击取消')
        // })
      } else {
        this.recUserdialogV = true
        this.cacheId = row.id
      }
    },
    handleDelete(index, row) {
      if (index === 'do') {
        // this.$confirm('确定删除吗？', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        assetsGudingDel(
          {
            id: this.cacheId
          }
        ).then(res => {
          if (res.code === 200) {
            this.recUserdialogV = false
            this.$message.success('删除成功')
            this.getList()
          }
        })
        // }).catch(() => {
        //   this.$message.info('已点击取消')
        // })
      } else {
        this.recUserdialogV = true
        this.cacheId = row.id
      }
    },
    getList() {
      this.listLoading = true
      assetsGudingPage(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    fetchData() {
      this.listLoading = false
      this.getList()
    }
  }
}
</script>
<style>
  .filter-container{
    margin-bottom: 20px;
  }
</style>
<style scoped>
  /deep/.formInner {
     .el-select>.el-input {
      width: 166px;
    }
  }
  .upload-demo{
    display: inline;
    margin-left: 10px;
  }
  .text-algin-center {
    text-align: center;
  }
  .container {
    padding: 25px 20px 20px 20px !important;
  }
</style>
